
<script setup>
	
	import port from './lib/port';
	import store from './lib/store';
	import { reactive, ref } from 'vue';
	import c_workitem from './components/workitem.vue';

	
	/** 词汇相关共享数据 */
	const storeData = store();

	/** 临时学习后的列表 */
	const _tempstudyedlist = storeData.afterStudylist;
	
	/** 学习后的列表 */
	const studyedlist = reactive([]);
	_tempstudyedlist.forEach(ite => {
		ite.change = 0;
		studyedlist.push(ite);
	});

	/** 参数 */
	const afterdata = reactive({
		box: storeData.query.box,
		learnId: storeData.query.learnId,
		courseId: storeData.query.courseId
	});

	/** 上一次播放位置 */
	const lastIndex = ref(0);

	/** 播放结束 */
	const playEnd = () => {
		studyedlist[lastIndex.value].play = false;
	};

	/** 监听自然结束 */
	uni.useAudio.onEnded(playEnd);

	/** 监听播放暂停 */
	uni.useAudio.onStop(playEnd);

	/** 播放词汇 */
	const playEvent = (item, index) => {
		playEnd();
		lastIndex.value = index;
		item.play = true;
		item.isclick = true;
		uni.useAudio.src(item.voiceFile?.url);
		
		if (!item.playWord) {
			/** 首次点击 */
			item.playWord = true;
			item.blockTranslation = false;
			
		} else {
			/** 二次点击 */
			item.playWord = false;
			item.blockTranslation = true;
		};
	};

	/** 临时数组长度 */
	function in_array(search, array, flag = false) {
		for (const i in array) {
			if (flag === true && array[i] === search) return true;
			else if (array[i] == search) return true;
		};
		
		return false;
	};

	/** 错误词汇列表 */
	const wrongWords = ref([]);
	
	/** 正确词汇列表 */
	const rightWords = ref([]);

	/** 加入选择的词汇 */
	function joinEvent(type, word, index) {
		word.change = word.change === type ? 0 : type;
		if (type == 1) {
			in_array(word.id, rightWords.value) ? rightWords.value.splice(rightWords.value.indexOf(word.id), 1) : rightWords.value.push(word.id);
			in_array(word.id, wrongWords.value) && wrongWords.value.splice(wrongWords.value.indexOf(word.id), 1);
			
		} else if (type == 2) {
			in_array(word.id, wrongWords.value) ? wrongWords.value.splice(wrongWords.value.indexOf(word.id), 1) : wrongWords.value.push(word.id);
			in_array(word.id, rightWords.value) && rightWords.value.splice(rightWords.value.indexOf(word.id), 1);
		};
	};
	
	
	/** 提交学习 */
	async function handleStart(){
		const param = { words: [] };
		param.type = afterdata.box == 0 ? 1 : 2;
		
		/** append item */
		const appendItem = item => {
			const findIndex = param.words.findIndex(({ id }) => id === item.id);
			!~findIndex ? param.words.push(item) : param.words.splice(findIndex, 1, item);
		};
		
		
		rightWords.value.forEach(item => {
			appendItem({ id: item, right: 1, type: 1 });
		});

		wrongWords.value.forEach(item => {
			appendItem({ id: item, right: 0, type: 1 });
		});
		
		if(param.type === 2){
			const list = storeData.correctlist;
			list?.forEach?.(item => {
				appendItem({ id: item.id, right: 1, type: 2 });
			});
		};
		
		// 学新的情况拿之前学前检测的
		if (param.type === 1) {
			const list = storeData.learningNewlist;
			list?.forEach?.(appendItem);
		};

		console.log({ ...param, ...afterdata });
		param.words.length && await port.postLearnSubmit_api({ ...param, ...afterdata });
		uni.setStorageSync('wrongWords', wrongWords.value);
		uni.setStorageSync('rightWords', rightWords.value);
		uni.redirectTo({ 
			url: '/pages/course/word/succes'
		});
	};


</script>

<template>
	<view class="containerbox">
		<uv-navbar :title="'学后检测'" left-icon="" placeholder bg-color="#4d6d8a" left-icon-color="#fff" titleStyle="color:#fff"/>
		
		<scroll-view scrollY class="containerbox px-30">
			<c_workitem
				isback
				:item="item" 
				:index="index" 
				:iteration="3"
				:key="item.id"
				@play="playEvent(item, index)"
				v-for="item,index in studyedlist"
				@joinEvent="joinEvent($event,item,index)"
			/>
		</scroll-view>
		
		<view class="flex items-center justify-between bottombox">
			<view class="flex-1 text-26 flex items-center text-white">
				<view class="mr-20">正确<text class="mx-5 text-32 correct-color">{{ rightWords.length }}</text>个</view>
				<view class="">错误<text class="mx-5 text-32 mistake-color">{{ wrongWords.length }}</text>个</view>
			</view>
			
			<view class="btn bgc-primary" @click="handleStart">确认提交</view>
		</view>
		
		<audio />
	</view>
</template>


<style lang="scss" scoped>
	@import "./style/common.scss";
</style>